<!DOCTYPE html>
<html>
<head>
    <title>Temperature vs. Time Graph</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas" width="700" height="550"></canvas>
    <script>
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');

        // Graph dimensions and style
        const margin = { top: 30, right: 30, bottom: 60, left: 70 };
        const graphWidth = canvas.width - margin.left - margin.right;
        const graphHeight = canvas.height - margin.top - margin.bottom;

        const tMax = 60; // max time in seconds
        const tempMax = 100; // max temperature in °C

        // --- Coordinate mapping functions ---
        function mapX(t) {
            return margin.left + (t / tMax) * graphWidth;
        }

        function mapY(temp) {
            return margin.top + graphHeight - (temp / tempMax) * graphHeight;
        }

        // --- Drawing functions ---

        function drawGrid() {
            ctx.beginPath();
            ctx.strokeStyle = '#d3d3d3'; // Light grey for minor grid
            ctx.lineWidth = 0.5;

            // Minor vertical grid lines (every 1s)
            for (let t = 1; t <= tMax; t++) {
                if (t % 10 !== 0) {
                    ctx.moveTo(mapX(t), margin.top);
                    ctx.lineTo(mapX(t), margin.top + graphHeight);
                }
            }

            // Minor horizontal grid lines (every 2.5°C)
            for (let temp = 2.5; temp < tempMax; temp += 2.5) {
                if (temp % 25 !== 0) {
                    ctx.moveTo(margin.left, mapY(temp));
                    ctx.lineTo(margin.left + graphWidth, mapY(temp));
                }
            }
            ctx.stroke();

            ctx.beginPath();
            ctx.strokeStyle = '#a9a9a9'; // Darker grey for major grid
            ctx.lineWidth = 1;

            // Major vertical grid lines (every 10s)
            for (let t = 10; t < tMax; t += 10) {
                ctx.moveTo(mapX(t), margin.top);
                ctx.lineTo(mapX(t), margin.top + graphHeight);
            }

            // Major horizontal grid lines (every 25°C)
            for (let temp = 25; temp < tempMax; temp += 25) {
                ctx.moveTo(margin.left, mapY(temp));
                ctx.lineTo(margin.left + graphWidth, mapY(temp));
            }
            ctx.stroke();
        }

        function drawAxes() {
            ctx.beginPath();
            ctx.strokeStyle = 'black';
            ctx.lineWidth = 1.5;

            // Y-axis
            ctx.moveTo(margin.left, margin.top);
            ctx.lineTo(margin.left, margin.top + graphHeight);

            // X-axis
            ctx.moveTo(margin.left, margin.top + graphHeight);
            ctx.lineTo(margin.left + graphWidth, margin.top + graphHeight);

            ctx.stroke();
        }
        
        function drawLabelsAndTicks() {
            ctx.fillStyle = 'black';
            ctx.font = '16px Arial';

            // Y-axis labels and ticks
            ctx.textAlign = 'right';
            ctx.textBaseline = 'middle';
            for (let temp = 0; temp <= tempMax; temp += 25) {
                ctx.fillText(temp, margin.left - 8, mapY(temp));
                // Add a small tick mark on the axis
                ctx.beginPath();
                ctx.moveTo(margin.left - 4, mapY(temp));
                ctx.lineTo(margin.left, mapY(temp));
                ctx.stroke();
            }

            // X-axis labels and ticks
            ctx.textAlign = 'center';
            ctx.textBaseline = 'top';
            for (let t = 0; t <= tMax; t += 10) {
                 ctx.fillText(t, mapX(t), margin.top + graphHeight + 8);
                // Add a small tick mark on the axis
                ctx.beginPath();
                ctx.moveTo(mapX(t), margin.top + graphHeight);
                ctx.lineTo(mapX(t), margin.top + graphHeight + 4);
                ctx.stroke();
            }

            // Axis titles
            ctx.textAlign = 'center';
            ctx.textBaseline = 'bottom';
            ctx.fillText('temperature / °C', margin.left - 5, margin.top - 5);
            
            ctx.textAlign = 'center';
            ctx.textBaseline = 'top';
            ctx.fillText('t / s', mapX(tMax/2), margin.top + graphHeight + 30);
            
            // Figure caption
            ctx.fillText('Fig. 3.2', mapX(tMax/2), canvas.height - 15);
        }

        function drawDataLine() {
            ctx.beginPath();
            ctx.strokeStyle = 'black';
            ctx.lineWidth = 2;

            // Segment 1: Heating
            ctx.moveTo(mapX(0), mapY(25));
            ctx.lineTo(mapX(20), mapY(80));

            // Segment 2: Boiling
            ctx.lineTo(mapX(60), mapY(80));

            ctx.stroke();
        }

        // --- Main drawing sequence ---
        drawGrid();
        drawAxes();
        drawLabelsAndTicks();
        drawDataLine();

    </script>
</body>
</html>